'use strict';

import React from 'react';

import {HttpService, Toast} from '../utils'

import phone from '../img/login/phone.png'
import pwd from '../img/login/pwd.png'
import user from '../img/login/user.png'
import code_ from '../img/login/code.png'
import {R_header} from './common/index'

class register extends React.Component {
    static contextTypes = {
        router: React.PropTypes.object.isRequired
    };

    constructor() {
        super();
        this.state = {
            disabled: false,
            text: '获取验证码',
            timer: 60,
            val: '',
            code: ''
        };
        this.countdown = []
    }

    changeValue(e) {
        this.check_phone(e.target.value);
    }

    changeCode(e) {
        this.setState({code: e.target.value});
    }

    check_phone(phone) {
        let patt = /^1[34578]\d{9}$/;
        let val = phone;
        this.setState({val: val});
        if (!val) {
            Toast.toast('手机号不能为空');
            return false;
        } else if (!patt.test(val)) {
            Toast.toast('手机号不正确，请重新输入');
            return false;
        }
        return true
    }

    async sregister(val, code) {
        const pwd = this.refs.pwd.value;
        if (pwd == '' || code == '') {
            Toast.toast('请填写完整信息');
            return;
        }
        if (!this.check_phone(val)) {
            return;
        }
        let regUrl = '/app/user/logon'
        if (localStorage.teacher == 1)
            regUrl = '/teacherapp/teacher/logon'
        const result = await HttpService.save({
            url: regUrl,
            data: {
                account: val,
                smscode: code,
                password: pwd,
                weixinclient: 'true',
                openid: localStorage.openid
            }
        });

        if (result.code == 10006) {
            clearInterval(this.countdown);
            localStorage.userid = result.data.userid;
            this.context.router.push('/addDevice/true');
            _hmt.push(['_trackEvent', 'page', 'register', '注册']);
            return;
        } else if (result.code == 20010) {
            _hmt.push(['_trackEvent', 'page', 'register', '注册-教师端']);
            if (result.data.yijiaoyun) {
                location.href = result.data.yijiaoyun;
            } else {
                const teacherData = await HttpService.query({
                    url: '/teacherapp/system/getThirdParty',
                    data: {
                        token: result.data.token
                    }
                });
                if (teacherData.code == 10134) {
                    location.href = teacherData.data.yijiaoyun;
                    return;
                }
                Toast.toast(teacherData.msg)
            }
        }
        Toast.toast(result.msg);
    }

    async getCode(phone) {
        if (!this.check_phone(phone)) {
            return;
        }
        if (this.state.disabled) {
            return;
        }
        let smsto = 0;
        let smsUrl = '/app/user/generateSMSCode'
        if (localStorage.teacher == 1) {
            smsto = 1;
            smsUrl = '/teacherapp/teacher/generateSMSCode'
        } else {
            let code = await HttpService.save({
                url: "/app/user/checkTelephone",
                data: {
                    account: phone,
                    weixinclient: 'true'
                }
            });
            if (code.code == 10003) {
                smsto = 1;
            } else {
                smsto = code.msg;
            }
        }

        if (smsto == 1) {
            const code = await HttpService.save({
                url: smsUrl,
                data: {
                    account: phone,
                    module: 'reg',
                    weixinclient: 'true'
                }
            });

            if (code.code == 10004||code.code == 20006) {
                this.setState({disabled: true, text: '59S 后重新获取', timer: 59});
                this.countdown = setInterval(() => {
                    var tt = this.state.timer - 1;
                    if (tt <= 0) {
                        this.setState({disabled: false, text: '获取验证码', timer: 60});
                        clearInterval(this.countdown);
                        return;
                    }
                    this.setState({
                        disabled: true,
                        text: tt + 'S 后重新获取',
                        timer: tt
                    })
                }, 1000);
            } else{
                Toast.toast(code.msg)
            }

        } else {
            Toast.toast(smsto);
        }
    }

    render() {
        let {val, code} = this.state;
        return (
            <div className="register">

                <R_header title="注册" left="1"/>

                <div className="app-login app-padding-lr24 app-margin-t30">
                    <div className="card">

                        <div className="step border-bottom app-wh88">
                            <div className="app-wh-45 _app-margin-right24">
                                <img className="app-wh100-all-radius" src={phone}/>
                            </div>
                            <div className="s-flex1 app-666-font30">
                                <input className="app-333-font28 login-input" onBlur={this.changeValue.bind(this)} placeholder="手机号" type="number"/>
                            </div>
                            <div className="s-flex1 s-j-end app-666-font30">
                                <div className={"login-code step s" + this.state.disabled} onClick={this.getCode.bind(this, val)}>
                                    <div className="s-flex1 s-j-center">{this.state.text}</div>
                                </div>
                            </div>
                        </div>

                        <div className="step border-bottom app-wh88">
                            <div className="app-wh-45 app-margin-right24">
                                <img className="app-wh100-all-radius" src={code_}/>
                            </div>
                            <div className="s-flex1 app-666-font30">
                                <input className="app-333-font28 login-input" placeholder="输入短信验证码" type="number" onChange={this.changeCode.bind(this)}/>
                            </div>
                        </div>
                        <div className="step border-bottom app-wh88">
                            <div className="app-wh-45 app-margin-right24">
                                <img className="app-wh100-all-radius" src={pwd}/>
                            </div>

                            <div className="s-flex1 app-666-font30">
                                <input className="app-333-font28 login-input" ref="pwd" placeholder="6-20位字符密码，区分大小写" type="password"/>
                            </div>

                        </div>

                    </div>

                    <div className="step app-yellow-radius-check-button login-btn" onClick={this.sregister.bind(this, val, code)}>
                        <div className="s-center">开通并登录</div>
                    </div>

                </div>
            </div>

        )
    }
}

export default register
